<template>
  <div style="padding: -15px 15px;">
    <div class="header">
      <el-menu :default-active="value" active-text-color="#409eff" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="baseSetting" @click="to('baseSetting')">① 基础信息</el-menu-item>
        <el-menu-item index="processDesign" @click="to('processDesign')">② 审批流程</el-menu-item>
      </el-menu>
      <div class="publish">
        <i class="el-icon-question" style="font-size: 23px;vertical-align: middle;cursor: pointer;" @click="openTip"></i>
        <el-button size="mini" @click="$emit('preview')"><i class="el-icon-view"></i>校验</el-button>
        <el-button size="mini" type="primary" @click="$emit('publish')"><i class="el-icon-s-promotion"></i>发布</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "layoutHeader",
    props:{
      value:{
        type: String,
        default:"baseSetting"
      }
    },
    data() {
      return {
        viewCode: false
      };
    },
    computed: {
      setup() {
        return this.$store.state.design
      }
    },
    created() {
      this.check()
    },
    mounted() {
      if (document.body.offsetWidth <= 970) {
        this.$message.warning("设计器未适配中小屏幕，建议您在PC电脑端浏览器进行操作")
      }
      this.listener()
    },
    methods: {
      publish() {
        this.$emit('publish')
      },
      openTip(){
        this.$emit('openTip')
      },
      exit() {
        this.$confirm('未发布的内容将不会被保存，是否直接退出 ?', '提示', {
          confirmButtonText: '退出',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.go(-1)
        })
      },
      to(path) {
        this.$emit('input', path)
      },
      handleSelect(key, keyPath) {
        this.$emit("select",key)
      },
      listener() {
        window.onunload = this.closeBefore()
        window.onbeforeunload = this.closeBefore()
        //window.on('beforeunload',this.closeBefore())
      },
      closeBefore() {
				console.log("刷新监听")
        return false
      },
      check() {
        if (this.$store.state.isEdit === null) {
          //this.$router.push("/workPanel");
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  >>> .el-menu.el-menu--horizontal{
    border-bottom: none;
  }
  /deep/ .header {
    min-width: 980px;
    position: relative;

    .el-menu {
      top: 0;
      z-index: 999;
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .publish {
      position: absolute;
      top: 15px;
      right: 20px;
      z-index: 1000;

      i {
        margin-right: 6px;
      }

      button {
        border-radius: 15px;
      }
    }
  }
</style>
